<template>
	<canvas :style="'width:' + width * 2 + 'rpx; height:' + height * 2 + 'rpx;'"
		:canvas-id="'canvas-luqulv' + index"></canvas>
</template>

<script>
	export default {
		props: {
			// 下标，用于canvas-id
			index: {
				type: Number,
				default: 0
			},
			// 值
			value: {
				type: Number,
				default: 0
			},
			// 背景颜色
			bgColor: {
				type: String,
				default: "#f8f8f8"
			},
			// 填充颜色，字体颜色
			color: {
				type: String,
				default: ""
			},
			// 视图宽，单位px
			width: {
				type: Number,
				default: 42
			},
			// 视图高，单位px
			height: {
				type: Number,
				default: 42
			}
		},

		mounted() {
			this.circleProgressbar()


		},

		methods: {
			/**
			 * 环形进度条
			 * arc(x, y, r, startAngle, endAngle, anticlockwise):
			 * 以(x, y) 为圆心，以r 为半径，90°代表0.5 * PI
			 * 从 startAngle 弧度开始到endAngle弧度结束。
			 * anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针
			 */
			circleProgressbar() {
				const center = uni.upx2px(this.width)
				const radius = uni.upx2px(this.width - 4)
				const lineWidth = uni.upx2px(8)
				const ratio = this.value / 100.0
				const progress = ratio * 2 * Math.PI

				// 整个圆环
				const ctx = uni.createCanvasContext('canvas-luqulv' + this.index)

				ctx.beginPath()
				ctx.arc(center, center, radius, 0, 2 * Math.PI)
				ctx.setStrokeStyle(this.bgColor)
				ctx.setLineWidth(lineWidth)
				ctx.stroke()

				// 进度
				ctx.beginPath()
				ctx.arc(center, center, radius, 0, progress)
				ctx.setStrokeStyle(this.color)
				ctx.setLineWidth(lineWidth)
				ctx.setLineCap('round')
				ctx.stroke()

				// 中心字体
				ctx.setFillStyle(this.color)
				ctx.setFontSize(uni.upx2px(20))
				ctx.setTextAlign('center')
				ctx.fillText(`${this.value}%`, center, uni.upx2px(50))
				ctx.stroke()
				ctx.draw()
			}
		}
	}
</script>

<style>
</style>